<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            padding-bottom: 800px;
        }
        .box{
            height: 30px;
            line-height: 30px;
            background-color: bisque;
        }
    </style>
</head>
<body>
    <div id="app">
        <h4>分支指令：基于判断结果选择性进行元素的显示(创建添加)和隐藏(删除)操作</h4>
        <h5>v-show : 通过css样式完成显示隐藏操作</h5>
        <p>v-show=" 可以用于判断的结果 ",当取值为true时删除元素上的display:none;当前取值为false时增加元素上的display:none</p>
        <p>flag1:{{ flag1 }}</p>
        <div v-show="flag1" class="box" style="color:red;">v-show</div>
        <br>
        <input type="button" value="(显示|隐藏)=v-show" @click="flag1=!flag1">
        <br>
        <p>v-show控制的元素，在元素隐藏时，元素内的vue语法依然会执行（数据不安全的操作）（操作效率高）</p>
        <div v-show="user" class="box">{{ user.name }}-{{ user.age }}</div>
        <div v-show="!user" class="box">查无数据</div>
        <input type="button" value="user=null" @click=" user=null ">
        <hr>
        <h5>v-if : 通过DOM控制完成显示隐藏操作</h5>
        <p>v-if=" 可以用于判断的结果 ",当取值为true时创建对应元素并写入页面;当前取值为false时删除该元素【此时元素内部的vue语法不会再执行】</p>
        <p>flag2:{{ flag2 }}</p>
        <div v-if="flag2" class="box" style="color:red;">v-if</div>
        <br>
        <input type="button" value="(显示|隐藏)=v-show" @click="flag2=!flag2">
        <br>
        <p>v-if控制的元素，在元素删除时，元素内的vue语法不会再被执行（数据操作是安全的）（操作效率低）</p>
        <div v-if="stu" class="box">{{ stu.name }}-{{ stu.age }}</div>
        <div v-if="!stu" class="box">查无数据</div>
        <input type="button" value="stu=null" @click=" stu=null ">
        <hr>
        <p>num:{{ num }}</p>

        <p v-show="num>0" style="color: green;">正数</p>
        <p v-show="num==0" style="color: orangered;">零</p>
        <p v-show="num<0" style="color: brown;">负数</p>

        <p v-if="num>0" style="color: green;">正数</p>
        <p v-if="num==0" style="color: orangered;">零</p>
        <p v-if="num<0" style="color: brown;">负数</p>

        <!-- 组合v-if 效率相对于 v-if 更高 -->
        <p v-if="num>0" style="color: green;">正数</p>
        <!-- <span>a</span> -->
        <p v-else-if="num==0" style="color: orangered;">零</p>
        <p v-else style="color: brown;">负数</p>

        <input type="button" value="+" @click="num++">
        <input type="button" value="-" @click="num--">

        <br>
    </div>
    <script type="module"> 
        import { createApp } from "../assets/vue3/vue.esm-browser.js";
        createApp({
            data(){
                return {
                    flag1:true,
                    flag2:true,
                    // ajax请求服务器。如果数据存在返回数据对象，如果不存在返回null
                    user:{
                        name:"tom",
                        age:23
                    },
                    stu:{
                        name:"tom",
                        age:23
                    },
                    num:3
                }
            }
        }).mount("#app")
    </script>
</body>
</html>